/**
 * 历史报事详情
 * @author truexin
 * @date   16/06/29
 */
import NoRecord from '../components/NoRecord.js';
import DetailInfo from '../components/detail/ImgTextDetail.js';
import Swiper from '../components/Swiper.js';
import LargeImg from '../components/LargeImg';

(function (lf, r) {
    var ajax = lf.utils.ajax,
        doAction = lf.bridgeJs.doAction,
        getUrlParam = lf.utils.getUrlParam;
    
    var eventId = '',
        type = '';
    
    const FINGER = 'finger',
        FINISHED = 'finished',
        UNFINISHED = 'unfinished',
        COMMENT = 'comment';
    
    let flag = getUrlParam('flag');
    
    var Report = React.createClass({
        getInitialState: function () {
            return {
                handlingInfo: [
                    ['workTime', '派单时间'],
                    ['workerName', '负责人'],
                    ['workerPhone', '联系电话']
                ],
                handledInfo: [
                    ['overTime', '完成时间'],
                    ['result', '结果描述']
                ],
                largeImg: '',
            }
        },
        
        render: function () {
            var data = this.props.data,
                status = '',
                pics = [],
                handlingClass = '',
                handledClass = '',
                bgClass = '',
                fmt = 'yyyy-MM-dd hh:mm',
                createTime = lf.utils.format(data.reportTime, fmt);
            
            if (data.status == '0') {
                status = '待处理';
                bgClass = "orangeBg";
                handlingClass = 'ele-hide';
                handledClass = 'ele-hide';
            }
            else if (data.status == '1') {
                status = '处理中';
                bgClass = "redBg"
                handledClass = 'ele-hide';
            }
            else if (data.status == '2') {
                status = '已处理';
                bgClass = "greenBg"
            }
            else {
                status = '已完成';
                bgClass = "grayBg";
            }
            
            if (data.picUrl != null)
                pics = data.picUrl.split(',');
            console.log(pics);

            return (
                <div>
                    <div className="unhandled">
                        <div className="panel">
                            <div>
                                <span className="font48 bold">报事时间：</span>
                                <span className="font42">{createTime}</span>
                                <i className={'type ' + bgClass}>{status}</i>
                            </div>
                            <div className="lf-content">
                                <span className="font48 bold">事件位置：</span>
                                <p className="font42">{data.location}</p>
                            </div>
                            <div className="lf-content">
                                <span className="font48 bold">内容描述：</span>
                                <p className="textLike font42 mui-text-justify">{data.content}</p>
                            </div>
                        </div>
                        <div className="panel">
                            <div className={data.picUrl ? '' : 'ele-hide'}>
                                <Swiper imgList={pics}
                                        enlargeHandler={this.enlargeHandler}/>
                            </div>

                        </div>
                    </div>
                    {
                        data.directFeedback != 1 ?
                            <div >
                                <div className={handlingClass}>
                                    <div className="horizontal-border"></div>
                                    <div className="handling">
                                        <DetailInfo data={data} tableTitList={this.state.handlingInfo} imgList="null"/>
                                    </div>
                                </div>
                                <div className={handledClass}>
                                    <div className="navigator">
                                        <div className="horizontal-border"></div>
                                    </div>
                                    <div className="handled">
                                        <DetailInfo data={data} tableTitList={this.state.handledInfo} imgList="null"/>
                                        <div className="panel">
                                            <div className={data.rebackPic ? ' ' : 'ele-hide'}>
                                                <Swiper imgList={(data.rebackPic && data.rebackPic.split(',') || '')}
                                                        enlargeHandler={this.enlargeHandler}/>
                                            </div>
                                        </div>


                                    </div>
                                </div>
                            </div>
                            :
                            <div className={handlingClass}>
                                <div className="horizontal-border"></div>
                                <div className="handling">
                                    <div className="panel">
                                        <span className="font48 bold">反馈结果：</span>
                                        <p className="font42">{data.result}</p>
                                    </div>
                                </div>
                            </div>
                    }
                    
                    <LargeImg src={this.state.largeImg}/>
                </div>
            );
        },
        enlargeHandler: function (src) {
            this.setState({largeImg: src});
        }
    });
    
    var SendBtn = React.createClass({
        componentDidMount: function () {
            var $consultBtn = $(r.findDOMNode(this.refs.consult)),
                $commentBtn = $(r.findDOMNode(this.refs.comment));
            $consultBtn.on('tap', function () {
                var url = 'report-consult.html?flag=' + flag + '&eventId=' + eventId;
                doAction(url, '报事咨询');
            })
            $commentBtn.on('tap', function () {
                var url = 'report-comment.html?flag=' + flag + '&eventId=' + eventId;
                doAction(url, '报事评价');
            })
        },
        render: function () {
            return (
                <div className="send-btns">
                    <ul>
                        <li ref="consult" className={type}>咨 询</li>
                        <li ref="comment" className={type}>评 价</li>
                    </ul>
                </div>
            );
        }
    });
    
    var Body = React.createClass({
        getInitialState: function () {
            return {
                reportList: [{initData: ''}],
                imgList: [],
                itemList: [],
            }
        },
        componentWillMount: function () {
            var me = this;
            lf.bridgeJs.getUser(function (user) {
                
                var page = getUrlParam('page');
                var houseNum = getUrlParam('houseNum');
                me.getDetailInfo(page, user, houseNum);
                
                lf.appJs.refresh();
            })
        },
        getDetailInfo: function (page, user, houseNum) {
            
            let api = flag == FINGER ? lf.finger.api.event.reportList : lf.api.report.history;

            let phone = flag == FINGER ? user.mobile : user.phone;
            
            var me = this;
            ajax({
                data: {
                    pageSize: 1,
                    page: page,
                    phone: phone,
                    houseNum: houseNum,
                    projectId: user.projectId,
                },
                success: function (data) {

                    if (data.code == '200') {
                        let result = data.dataList;
                        let reports = result.map(function (report) {
                            return <Report data={report}/>
                        })

                        eventId = result[0].id;

                        if (flag == FINGER) {
                            if (result[0].evaluate == 1) {
                                type = FINISHED;
                            } else {
                                type = UNFINISHED;
                            }
                        } else {
                            if (result[0].evaluate == 1) {
                                type = COMMENT;
                            }
                        }
                        
                        me.setState({
                            reportList: reports,
                        });
                    }
                    else {
                        alert(data.desc);
                    }
                }.bind(me)
            }, api);
        },
        render: function () {
            if (this.state.reportList.length > 0) {
                return (
                    <div className="property-report-detail">
                        <div className="container">
                            {this.state.reportList}
                        </div>
                        <SendBtn/>
                    </div>
                );
            }
            else {
                return <NoRecord/>
            }
        }
    });
    
    r.render(
        <Body/>,
        document.getElementById('root'), function () {
            
        }
    )
    
})(liefeng, React)
